<template>
  <div class="main">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>站点监测</span>
      </div>
      <div>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="站点名称">
            <el-input placeholder="站点名称" v-model="param.station"></el-input>
          </el-form-item>
          <el-form-item label="站点类型">
            <el-select placeholder="站点类型" v-model="param.type" >
              <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="起始时间">
            <el-date-picker v-model="param.beginDate" type="datetime" placeholder="开始时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            <el-date-picker v-model="param.endDate" type="datetime" placeholder="结束时间" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="query()">查询</el-button>
          </el-form-item>
        </el-form>

        <el-table :data="tableData" border style="width: 100%">
          <el-table-column type="index" width="100"></el-table-column>
          <el-table-column prop="YMDHM" label="日期" width="400">
          </el-table-column>
          <el-table-column prop="STNM" label="站点名称" width="400">
          </el-table-column>
          <el-table-column prop="DTYPE" label="站点类型" width="400">
          </el-table-column>
        </el-table>

        <div class="pagination ">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="param.page"
          :page-sizes="[15, 20, 30, 50]" :page-size="param.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
const typeList = [
  {id: 'LAKE', name: '湖泊'},
  {id: 'CANAL', name: '港渠'},
  {id: 'HZ', name: '涵闸'},
  {id: 'WATERLOGGING', name: '渍水'},
  {id: 'RIVER', name: '河段'},
  {id: 'RAIN', name: '雨量'},
  {id: 'RESERVOIR', name: '水库'}
]

export default {
  data () {
    return {
      typeList: typeList,
      param: {
        station: '',
        type: '',
        beginDate: '',
        endDate: '',
        pageSize: 15,
        page: 1
      },
      tableData: [],
      total: 0
    }
  },
  created () {
    this.queryData()
  },
  methods: {
    queryData (param) {
      this.$postJSON('/ssjc/moint/list', param).then(result => {
        console.log(result)
        if (result.data.result[0].DTYPE === 'RIVER') {
          console.log(111)
        }

        this.tableData = result.data.result
        this.total = result.data.total
        this.param.currPage = result.data.currPage
        this.param.pageSize = result.data.pageSize
      })
    },
    handleSizeChange (val) {
      this.param.pageSize = val
      this.queryData(this.param)
    },
    handleCurrentChange (val) {
      this.param.page = val
      this.queryData(this.param)
    },
    query () {
      this.queryData(this.param)
    }
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  background-color: #C0C4CC;
  margin: 10px;
  width: 98%;
  min-height: 730px;
}

.pagination  {
  margin-top: 8px;
  margin-left: 150px;
}
</style>
